<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
		<style type="text/css">
			.mui-table-view-cell:after {
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				height: 1px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #c8c7cc;
			}
			
			.mui-table-view-cell span {
				position: absolute;
				right: 34px;
				top: 1px;
				line-height: 42px;
				display: block;
				overflow: hidden;
			}
			
			.mui-table-view-cell span img {
				width: 42px;
				height: 42px;
				border-radius: 21px;
			}
		</style>
	</head>

	<body>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/zepto_1.1.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">个人信息</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#picture" class="mui-navigate-right touxiang">
						我的头像
						<span><img src="img/lbxx.jpg" alt="" /></span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						我的昵称
						<span>请叫我疯子</span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right btn" id='demo2' data-options='{"type":"date","beginYear":1960,"endYear":2020}'>
						我的生日
						<span id="dateInfo">11月29日</span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#sex" class="mui-navigate-right">
						性别
						<span id="sexBox">男</span>
					</a>
				</li>
			</ul>
		</div>
		<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#" onclick="captureImage()">拍照或录像</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#" onclick="galleryImg()">选取现有的</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#picture"><b>取消</b></a>
				</li>
			</ul>
		</div>
		<div id="sex" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="javascript:;" class="chooseSex">男</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="javascript:;" class="chooseSex">女</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#sex"><b>取消</b></a>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			// 扩展API加载完毕后调用onPlusReady回调函数 
			document.addEventListener("plusready", onPlusReady, false);
			// 扩展API加载完毕，现在可以正常调用扩展API 
			function onPlusReady() {
				var cmr = plus.camera.getCamera();
			}
			// 拍照
			function captureImage() {
				var cmr = plus.camera.getCamera();
				var res = cmr.supportedImageResolutions[0];
				var fmt = cmr.supportedImageFormats[0];
				console.log("Resolution: " + res + ", Format: " + fmt);
				cmr.captureImage(function(path) {
						alert("Capture image success: " + path);
					},
					function(error) {
						alert("Capture image failed: " + error.message);
					}, {
						resolution: res,
						format: fmt
					}
				);
			}
			// 从相册中选择图片 
			function galleryImg() {
				// 从相册中选择图片
				console.log("从相册中选择图片:");
				plus.gallery.pick(function(path) {
					console.log(path);
				}, function(e) {
					console.log("取消选择图片");
				}, {
					filter: "image"
				});
			}
			
			// 时间组件
			(function($) {
				$.init();
				var result = $('#dateInfo')[0];
				var btns = $('.btn');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						/*
						 * 首次显示时实例化组件
						 * 示例为了简洁，将 options 放在了按钮的 dom 上
						 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
						 */
						var picker = new $.DtPicker(options);
						picker.show(function(rs) {
							/*
							 * rs.value 拼合后的 value
							 * rs.text 拼合后的 text
							 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
							 * rs.m 月，用法同年
							 * rs.d 日，用法同年
							 * rs.h 时，用法同年
							 * rs.i 分（minutes 的第二个字母），用法同年
							 */
							result.innerText = rs.m.text+"月"+rs.d.text+"日";
							/* 
							 * 返回 false 可以阻止选择框的关闭
							 * return false;
							 */
							/*
							 * 释放组件资源，释放后将将不能再操作组件
							 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
							 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
							 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
							 */
							picker.dispose();
						});
					}, false);
				});
			})(mui);
			
			// 性别选择
			mui('#sex').off('tap','a')
			$('#sex').on('tap','a',function(){
				$(this).addClass('mui-active')
			})
			function chooseSex(sex) {
				document.getElementById('sexBox').innerHTML = sex;
			}
		</script>
	</body>

</html>